<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link rel="stylesheet" href="/css/certificateWeb/workNews/workNews.css">
<link type="text/css" href="/css/cultivateWeb/style/my.css" rel="stylesheet">
<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<style>
    .span_2 {
        font-size: 16px
    }
</style>
<div style="clear: both"></div>
<div style="background-color: #f7f7f7; ">
    <div style="height: 40px">
        <p style="margin: 0px auto auto 380px; line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 消息中心</p>
    </div>
    <hr style="margin: 0 auto  ; width: 1200px"/>
    <section class="sec_1" style="background:#F7F7F7;padding-top: 0">
        <div class="div_1">
            <ul>
                <li><a href="/cultivate/my">个人资料</a></li>
                <li><a href="/cultivate/myOrder">我的订单</a></li>
<!--                <li><a href="/cultivate/myClasss/myClasss">我的班级</a></li>-->
                <li><a href="/cultivate/myCourse">我的课程</a></li>
                <li><a href="/cultivate/myCoursePlan">我的课程计划</a></li>
                <li><a href="/cultivate/studyRecord">学习记录</a></li>
                <li onclick="recruit()"><a>我的简历</a></li>
                <li><a href="/cultivate/deliverRecord">投递记录</a></li>
                <li><a href="/cultivate/applyRecord">申请记录</a></li>
                <li class="this"><a href="/cultivate/myMessage">消息中心</a></li>
                <li><a href="/cultivate/myCertificates">我的证书</a></li>
                <li onclick="mock2(this)" data-type="2"><a>幼儿照护初级模拟考试</a></li>
                <li onclick="mock2(this)" data-type="1"><a>幼儿照护中级模拟考试</a></li>
                <li onclick="mock2(this)" data-type="0"><a>幼儿照护高级模拟考试</a></li>
            </ul>
        </div>
        <div class="div_2">
            <div id="msg">
            </div>
            <div id="page" 　class="page"></div>
        </div>
        <div style="clear: both"></div>
    </section>
</div>
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script type="text/javascript" src="/js/mobile.js"></script>
<script>
    $(function () {
        ajaxToken("/jzApi/user/msgListApi", "GET", {
            type: 1,
            state: '',
            current: 1,
            number: 14
        }, function (res) {
            console.log("ee" , res)
            if (res.pages == 0) {
                $("#msg").html('<div class="noData">暂无数据</div>');
            } else {
                var list = res.records;
                var news = '';
                list.forEach(function (item, index) {
                    var a = '', b = '';
                    if (item.state == 0) {
                        a = '<span class="read">未读</span>'
                    } else if (item.state == 2) {
                        a = '<span class="readed">已读</span>'
                    }
                    if (item.enclosure != '' && item.enclosure != null) {
                        b = '<div><a href="' + item.enclosure + '" download style="text-decoration: underline;color: #649745" >附件下载</a></div>'
                    }
                    news += '<div href="#" class="message" data-id="' + item.id + '" data-state="' + item.state + '" onclick="msg(this)">' +
                        '<div class="flex1"><input type="hidden" value="' + item.id + '" id="msgId" />' +
                        '<span class="span_2">' + item.title + a + '</span>' +
                        '<span class="span_1" style="margin: 0">' + item.createrDate + '</span></div>' +
                        '<div class="s change content1">' + item.content + b + '</div></div>';
                });
                $("#msg").html(news);
                page(1, res.pages);
            }
        })
        $(".div_2").on("click", ".span_2", function () {
            $(this).parents(".message").find(".s").toggleClass("change");
            $(this).parents(".message").toggleClass("bg_shadow");
            $(this).parents(".message").siblings().find(".s").addClass("change");
            $(this).parents(".message").siblings().removeClass("bg_shadow");
        })
    });

    function msg(that) {
        var id = $(that).attr("data-id");
        var state = $(that).attr("data-state");
        if (state == 0) {
            ajaxToken("/jzApi/user/updateStateApi", "GET", {
                id: id,
                t: new Date()
            }, function (r) {
                    ajaxToken("/jzApi/user/unreadNumApi", "GET", {
                        type:1
                    }, function (res) {
                        window.localStorage.setItem("unreadNum1",res);
                    });
                $(that).find(".read").html("已读");
                $(that).find(".read").addClass("readed");
            })
        }
    }

    function page(num, tolPages) {
        $("#page").paging({
            nowPage: Number(num), // 当前页码
            pageNum: Number(tolPages), // 总页码
            buttonNum: 10, //要展示的页码数量
            canJump: 1,// 是否能跳转。0=不显示（默认），1=显示
            showOne: 0,//只有一页时，是否显示。0=不显示,1=显示（默认）
            callback: function (num) { //回调函数
                ajaxToken("/jzApi/user/msgListApi", "GET", {
                    type: 1,
                    state: '',
                    current: num,
                    number: 14,
                    t: new Date()
                }, function (res) {
                    var list = res.records;
                    var news = '';
                    list.forEach(function (item, index) {
                        var a = '', b = '';
                        if (item.state == 0) {
                            a = '<span class="read">未读</span>'
                        } else if (item.state == 2) {
                            a = '<span class="readed">已读</span>'
                        }
                        if (item.enclosure != '' && item.enclosure != null) {
                            b = '<div><a href="' + item.enclosure + '" download style="text-decoration: underline;color: #649745" >附件下载</a></div>'
                        }
                        news += '<div href="#" class="message" data-id="' + item.id + '" data-state="' + item.state + '" onclick="msg(this)">' +
                            '<div class="flex1"><input type="hidden" value="' + item.id + '" id="msgId" />' +
                            '<span class="span_2">' + item.title + a + '</span>' +
                            '<span class="span_1" style="margin: 0">' + item.createrDate + '</span></div>' +
                            '<div class="s change content1">' + item.content + b + '</div></div>';
                    });
                    $("#msg").html(news);
                })
            }
        });
    }

</script>
<script type="text/javascript" src="/js/xlPaging.js"></script>
</body>
</html>